<template>
  <div class="dashboard-container">
    <el-divider><span class="ud">1</span> 协议主体</el-divider>

    <el-card class="box-card">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="协议客户:" prop="name">
              <el-input
                size="small"
                style="width: 100px"
                v-model="ruleForm.name"
              ></el-input>
              <span> 上海正也医药有限公司</span>
            </el-form-item></el-col
          >
          <el-col :span="12">
            <el-form-item label="协议状态:">
              <el-select
                size="small"
                v-model="querys"
                placeholder="请选择协议状态"
              >
                <el-option
                  v-for="item in agreement"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="购进指标:">
              <el-select size="small" v-model="query">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
              <el-input
                size="small"
                style="width: 350px; margin-left: 10px"
                placeholder="请输入金额/数量"
                v-model="input"
                :disabled="true"
              >
              </el-input></el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="纯销指标:">
              <el-input
                size="small"
                style="width: 100px"
                v-model="ruleForm.nams"
              ></el-input>
              <el-input
                size="small"
                style="width: 350px; margin-left: 10px"
                placeholder="请输入金额/数量"
                v-model="input"
                :disabled="true"
              >
              </el-input
            ></el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="销售区域:">
              <el-input
                size="small"
                style="width: 100px"
                v-model="ruleForm.xiamd"
              ></el-input>
              <el-tag
                style="margin-left: 10px"
                v-for="tag in tags"
                :key="tag.name"
                closable
                :type="tag.type"
              >
                {{ tag.name }}
              </el-tag>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="签订时间:">
              <el-input
                size="small"
                style="width: 300px"
                v-model="ruleForm.itema"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="购进渠道:">
              <el-select style="width: 110px" size="small" v-model="queryss">
                <el-option
                  v-for="item in channels"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
              <el-input
                size="small"
                style="width: 110px; margin-left: 10px"
                v-model="ruleForm.channel"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="ddd_a">
        <el-table
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column prop="date" label="指定渠道编码"> </el-table-column>
          <el-table-column prop="name" label="指定渠道名称"> </el-table-column>
          <el-table-column prop="address" label="所在省"> </el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-divider><span class="ud">2</span> 产品政策</el-divider>
    <div class="du_col">
      <el-row :gutter="24">
        <el-col :span="2">
          <el-button size="mini" type="primary">添加产品</el-button></el-col
        >
        <el-col :span="5"><span>购进总指标（万元）：￥152.65</span></el-col>
        <el-col :span="12"
          >指标按季度分解（万元）：【Q1】￥12.5 【Q2】￥12.5 【Q3】￥12.5
          【Q4】￥12.5
        </el-col>
        <el-col :span="4">纯销总指标（万元）：￥152.65</el-col>
      </el-row>
    </div>
    <el-card class="box-cards">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="5">
            <el-form-item label="产品:">
              <el-input
                size="small"
                style="width: 100px"
                v-model="ruleForm.product"
              ></el-input>
              <span style="color: #679bfe"> 美复胶丸 24粒/盒</span>
            </el-form-item></el-col
          >
          <el-col :span="18">
            <el-form-item label="协议效期:">
              <el-input
                size="small"
                style="width: 210px"
                v-model="ruleForm.items"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="1">
            <el-button size="small" type="warning" plain
              >删除</el-button
            ></el-col
          >
        </el-row>
      </el-form>
    </el-card>
    <el-card class="box-cardss">
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="formLabelAlign"
      >
        <el-row>
          <el-col :span="4">
            <el-form-item label="协议价（元）">
              <el-input
                placeholder="请输入"
                style="width: 150px"
                v-model="formLabelAlign.name"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="票折（元）">
              <el-input
                placeholder="请输入"
                style="width: 150px"
                v-model="formLabelAlign.name"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="购进指标量（大单位）">
              <el-input
                placeholder="请输入"
                style="width: 150px"
                v-model="formLabelAlign.name"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="购进指标量（小单位）">
              <el-input
                placeholder="请输入"
                style="width: 150px"
                v-model="formLabelAlign.name"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="购进金额（万元）">
              <el-input
                placeholder="请输入"
                style="width: 150px"
                v-model="formLabelAlign.name"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="纯销指标量（小单位）">
              <el-input
                placeholder="请输入"
                style="width: 150px"
                v-model="formLabelAlign.name"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="纯销指标金额（万元）">
              <el-input
                placeholder="请输入"
                style="width: 150px"
                v-model="formLabelAlign.name"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-divider></el-divider>
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="formLabelAlign"
      >
        <el-row>
          <el-col :span="3">
            <el-form-item label="分销奖励">
              <el-input
                placeholder="请输入"
                style="width: 150px"
                v-model="formLabelAlign.name"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="3">
            <el-form-item label="费用科目">
              <el-select style="width: 150px" size="small" v-model="subje">
                <el-option
                  v-for="item in subjects"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="零售配送">
              <el-input
                placeholder="请输入"
                style="width: 150px"
                v-model="formLabelAlign.name"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="费用科目">
              <el-select style="width: 150px" size="small" v-model="costsa">
                <el-option
                  v-for="item in cost"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="医疗配送商">
              <el-input
                placeholder="请输入"
                style="width: 150px"
                v-model="formLabelAlign.name"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="费用科目">
              <el-select style="width: 150px" size="small" v-model="costsa">
                <el-option
                  v-for="item in cost"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="自定义7">
              <el-date-picker
                style="width: 150px"
                v-model="dwqdDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="自定义8">
              <el-date-picker
                style="width: 150px"
                v-model="dwqdDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-divider><span class="ud">3</span> 补充协议</el-divider>
    <el-card class="box-card" style="height: 350px">
      <div style="float: right">
        <el-button size="small" type="primary">新增</el-button>
      </div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="补充协议1" name="first">
          <div style="float: left">协议内容：</div>
          <div style="float: right">
            <el-button size="small" type="warning" plain>删除</el-button>
          </div>
          <el-input
            class="text_area"
            type="textarea"
            placeholder="请输入内容"
            v-model="textarea"
            maxlength="30"
            show-word-limit
          >
          </el-input>
        </el-tab-pane>
        <el-tab-pane label="补充协议2" name="second"
          ><div style="float: left">协议内容：</div>
          <div style="float: right">
            <el-button size="small" type="warning" plain>删除</el-button>
          </div>
          <el-input
            class="text_area"
            type="textarea"
            placeholder="请输入内容"
            v-model="textarea"
            maxlength="30"
            show-word-limit
          >
          </el-input
        ></el-tab-pane>
        <el-tab-pane label="补充协议3" name="third"
          ><div style="float: left">协议内容：</div>
          <div style="float: right">
            <el-button size="small" type="warning" plain>删除</el-button>
          </div>
          <el-input
            class="text_area"
            type="textarea"
            placeholder="请输入内容"
            v-model="textarea"
            maxlength="30"
            show-word-limit
          >
          </el-input
        ></el-tab-pane>
      </el-tabs>
      <el-button style="margin-top: 10px" type="primary">保存</el-button>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Dashboard",
  computed: {},
  data() {
    return {
      textarea: "",
      activeName: "first",
      dwqdDate: "",
      labelPosition: "top",
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
      },
      subjects: [
        {
          value: "01",
          label: "单选项1",
        },
        {
          value: "02",
          label: "单选项2",
        },
      ],
      tableData: [
        {
          date: "BJ00090",
          name: "宁波九州通药业有限公司",
          address: "浙江省",
        },
        {
          date: "BJ00192",
          name: "国药控股精华有限公司",
          address: "浙江省",
        },

        {
          date: "BJ000283",
          name: "老百姓药业有限公司",
          address: "浙江省",
        },
      ],
      ruleForm: {
        name: "选择客户",
        nams: "金额",
        xiamd: "选择区域",
        itema: "2020-02-01 18:25",
        channel: "请选择渠道",
        product: "请选择产品",
        items: "2020-02-01 ~ 2020-05-01",
      },
      input: "",
      channels: [
        {
          value: "01",
          label: "指定渠道",
        },
        {
          value: "02",
          label: "特殊渠道",
        },
      ],
      tags: [{ name: "全国", type: "" }],
      options: [
        {
          value: "01",
          label: "金额",
        },
        {
          value: "02",
          label: "数量",
        },
      ],
      agreement: [
        {
          value: "01",
          label: "正常",
        },
        {
          value: "02",
          label: "异常",
        },
      ],
      cost: [
        {
          value: "01",
          label: "多选项1",
        },
        {
          value: "02",
          label: "多选项2",
        },
      ],
      query: "01",
      querys: "01",
      queryss: "01",
      subje: "01",
      costsa: "01",

      rules: {
        name: [{ required: true, message: "请选择客户", trigger: "blur" }],
      },
    };
  },
  created() {
    let date = new Date();
    let y = date.getFullYear();
    let m = date.getMonth() + 1;
    m = m < 10 ? "0" + m : m;
    let d = date.getDate();
    d = d < 10 ? "0" + d : d;
    const time = y + "-" + m + "-" + d;
    this.dwqdDate = time;
  },
  mounted() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#f5f5f5");
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  },
};
</script>

<style lang="scss" scoped>
.ud {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #4d8cfe;
  text-align: center;
  color: #fff;
}
.text_area {
  margin-top: 5px;
}
.el-divider--horizontal {
  margin: 15px 0;
  background: 0 0;
  border-top: 3px dashed #e8eaec;
}
.el-divider__text {
  background: none;
  font-weight: bold;
}

.box-card {
  width: 99%;
  margin: auto;
}
.box-cards {
  width: 99%;
  margin: auto;
  height: 80px;
}
.box-cardss {
  width: 99%;
  margin: auto;

  margin: 3px auto;
}
.ddd_a {
  width: 95%;
  float: right;
}
.du_col {
  margin: 25px 50px;
}
</style>
